<div id="welcome" v-cloak>
  <div  class="container-fluid p-4">
    <div class="card p-4 mb-3">
        <div class="card-body d-flex flex-column pt-2">
        <div class="card-title mb-0 d-flex flex-row justify-content-between">
          <p style="font-size: 14px; margin-bottom: 0px; font-wieght: 700;">
            Priority CVEs
          </p>
          <a purpose="edit-button" @click="clickOpenEditModal" v-if="!syncing">
            <img alt="a small pencil" src="/images/pencil-14x14@2x.png">Edit
          </a>
        </div>
          <div class="d-flex flex-column align-items-center w-100" v-if="priorityVulnPatchProgress.length === 0 && !syncing">
            <p class="font-weight-bold mb-1">No priority CVEs</p>
            <p class="text-muted mb-0">Configure a list <a @click="clickOpenEditModal">here</a> to track your organization's progress patching particular vulnerabilities.</p>
          </div>
          <div class="d-flex flex-column align-items-center w-100" v-else-if="syncing">
            <p class="font-weight-bold mb-1">Loading priority CVE progress</p>
            <p>
              <span purpose="loading-indicator">
                <span class="loading-dot dot1"></span>
                <span class="loading-dot dot2"></span>
                <span class="loading-dot dot3"></span>
                <span class="loading-dot dot4"></span>
              </span>
            </p>
          </div>
          <div v-else>
            <p class="">This is the list of particular CVEs your organization is currently working to patch.</p>
            <table purpose="priority-cve-table" class="table table-responsive-md my-0">
              <thead class="thead-light">
                <tr>
                  <th purpose="cve-id-column">CVE ID</th>
                  <th purpose="reported-date-column">Reported date</th>
                  <th purpose="affected-software-column">Affected software</th>
                  <th purpose="progress-column">Patch compliance</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="vuln in priorityVulnPatchProgress">
                  <td purpose="cve-id-column">
                    <a class="d-inline" :href="vuln.additionalDetailsUrl" target="_blank">{{vuln.cveId}}</a>
                  </td>
                  <td purpose="reported-date-column">
                    <js-timestamp :at="vuln.createdAt" format="calendar" v-if="vuln.createdAt"></js-timestamp>
                    <span v-else><strong>-</strong></span>
                  </td>
                  <td purpose="affected-software-column">
                    <span v-if="vuln.affectedSoftware">
                      <div v-if="vuln.affectedSoftware.length > 1">
                        <span class="truncated-affected-software">
                        {{vuln.affectedSoftware.length}} items
                          <div class="affected-software-tooltip">
                            <a :href="software.url" target="_blank" v-for="software in vuln.affectedSoftware" >{{software.name}} @ {{software.version}}</a>
                          </div>
                        </span>
                      </div>
                      <span v-else>
                        <a class="d-inline" :href="vuln.affectedSoftware[0].url">{{vuln.affectedSoftware[0].name}} @ {{vuln.affectedSoftware[0].version}}</a>
                      </span>
                    </span>
                    <span v-else><strong>-</strong></span>
                  </td>
                  <td purpose="progress-column">
                    <div class="d-flex flex-row align-items-center">
                      <div purpose="vuln-patch-progress-bar" >
                        <div :class="[vuln.patchProgressPercentage >= 80 && vuln.patchProgressPercentage <= 89 ? 'progress-yellow' : vuln.patchProgressPercentage <= 80 ? 'progress-red' : vuln.patchProgressPercentage >= 90 ? 'progress-green' : ''  ]" :style="'width:'+vuln.patchProgressPercentage+'%' "></div>
                      </div>
                      <p class="mb-0 ml-3 text-nowrap">{{vuln.patchProgressPercentage}} %</p>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="card p-4 mb-3">
        <div class="card-title">
          <p>
            New vulnerabilities detected in the past 48 hours
          </p>
        </div>
        <div class="card-body pt-0">
          <div class="flex-row d-flex w-100 justify-content-around" v-if="dataForGraphs.newPublishedVulnerabilities && !graphSyncing">
            <div purpose="new-vulnerabilities">
              <span style="font-size: 48px; color: #292b2d; padding: 0; text-align: center;">{{dataForGraphs.newPublishedVulnerabilities.numberOfNewCriticalVulnerabilities}}</span>
              <div class="d-flex flex-row justify-content-around align-items-center"><div class="mx-2" style="height: 16px; width: 16px; background-color: #E07A83; border: 1px solid #8C323A;"></div><p class="mb-0">Critical</p></div>
            </div>
            <div purpose="new-vulnerabilities">
              <span style="font-size: 48px; color: #292b2d; padding: 0; text-align: center;">{{dataForGraphs.newPublishedVulnerabilities.numberOfNewHighVulnerabilities}}</span>
              <div class="d-flex flex-row justify-content-around align-items-center"><div class="mx-2" style="height: 16px; width: 16px; background-color: #FB8B62; border: 1px solid #E75D29;"></div><p class="mb-0">High</p></div>
            </div>
            <div purpose="new-vulnerabilities">
              <span style="font-size: 48px; color: #292b2d; padding: 0; text-align: center;">{{dataForGraphs.newPublishedVulnerabilities.totalNumberOfNewVulnerabilities}}</span>
              <div class="d-flex flex-row justify-content-around align-items-center"><div class="mx-2" style="height: 16px; width: 16px; background-color: #BEC2DE; border: 1px solid #8C93C0;"></div><p class="mb-0">Total</p></div>
            </div>
          </div>
          <div class="d-flex flex-column align-items-center w-100" v-else-if="graphSyncing">
            <p class="font-weight-bold mb-1">Loading</p>
            <p>
              <span purpose="loading-indicator">
                <span class="loading-dot dot1"></span>
                <span class="loading-dot dot2"></span>
                <span class="loading-dot dot3"></span>
                <span class="loading-dot dot4"></span>
              </span>
            </p>
          </div>
        </div>
      </div>
    <div class="card-columns">
      <div class="card p-4">
        <div class="card-title">
          <p>
          Average number of days to resolve critical vulnerabilities
        </p>
        </div>
        <div class="d-flex flex-column align-items-center w-100 py-3" v-if="graphSyncing">
          <p class="font-weight-bold mb-1">Loading</p>
          <p>
            <span purpose="loading-indicator">
              <span class="loading-dot dot1"></span>
              <span class="loading-dot dot2"></span>
              <span class="loading-dot dot3"></span>
              <span class="loading-dot dot4"></span>
            </span>
          </p>
        </div>
        <canvas id="average-remediation-time"></canvas>

      </div>
      <div class="card p-4">
        <div class="card-title">
          <p>
            Percentage of hosts with vulnerabilities by severity
          </p>
        </div>
        <div class="d-flex flex-column align-items-center py-3" v-if="graphSyncing">
          <p class="font-weight-bold mb-1">Loading</p>
          <p>
            <span purpose="loading-indicator">
              <span class="loading-dot dot1"></span>
              <span class="loading-dot dot2"></span>
              <span class="loading-dot dot3"></span>
              <span class="loading-dot dot4"></span>
            </span>
          </p>
        </div>
        <div class="d-flex flex-row">
          <div class="w-50">
            <canvas id="percent-with-critical-vulns"></canvas>
          </div>
            <div class="w-50">
            <canvas id="percent-with-high-vulns"></canvas>
          </div>
        </div>
      </div>
      <div class="card p-4">
        <div class="card-title">
          <p>
            Number of vulnerabilities by severity
          </p>
        </div>
        <div class="d-flex flex-column align-items-center py-3" v-if="graphSyncing">
          <p class="font-weight-bold mb-1">Loading</p>
          <p>
            <span purpose="loading-indicator">
              <span class="loading-dot dot1"></span>
              <span class="loading-dot dot2"></span>
              <span class="loading-dot dot3"></span>
              <span class="loading-dot dot4"></span>
            </span>
          </p>
        </div>
        <canvas id="vuln-by-severity"></canvas>
      </div>
      <div class="card p-4">
        <div class="card-title">
          <p>
            Number of vulnerabilities detected by severity
          </p>
        </div>
        <div class="d-flex flex-column align-items-center py-3" v-if="graphSyncing">
          <p class="font-weight-bold mb-1">Loading</p>
          <p>
            <span purpose="loading-indicator">
              <span class="loading-dot dot1"></span>
              <span class="loading-dot dot2"></span>
              <span class="loading-dot dot3"></span>
              <span class="loading-dot dot4"></span>
            </span>
          </p>
        </div>
        <canvas id="vuln-over-time"></canvas>
      </div>
    </div>
  </div>
  <modal v-if="modal === 'priority-cves'" @close="clickCloseModal()">
    <div class="modal-body">
      <h3>Priority CVEs</h3>
      <p class="muted">Configure the list of particular CVEs your organization is working to patch.</p>
        <ajax-form :handle-submitting="handleSubmittingPriorityCveForm" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="formRules">
          <div purpose="form-card" class="card">
            <h5>CVEs</h5>
            <p class="muted">Enter the full ID of each CVE, including the “CVE-” prefix.</p>
            <multifield v-model="formData.priorityCves" placeholder="CVE-2023-12345" :cloud-error="cloudError" :value="formData.priorityCves" add-button-text="Add CVE"></multifield>
            <cloud-error :cloud-error="cloudError" v-if="cloudError && cloudError.exit === 'invalidCve'">CVEs should be in the standard format of CVE-&lt;YYYY&gt;-&lt;number&gt;.
            <br> Could there be a typo?</cloud-error>
          </div>
          <div class="d-flex flex-row justify-content-end align-items-center">
            <a style="cursor: pointer; color: #6A67FE; margin-right: 16px;" @click="clickCloseModal()">Cancel</a>
            <ajax-button :syncing="syncing">Save</ajax-button>
          </div>
        </ajax-form>
    </div>
  </modal>
</div>
<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>
